<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>Subjects</title>
<link rel="stylesheet" href="../css/normalize.css">
<link rel="stylesheet" href="../css/teacher_style.css">
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/moment.min.js"></script>
</head>
<body>
	<div id="header"></div>
	<!-- header -->

	<div class="container">
		<div class="main-left">
			<div class="main-right">
				<div class="main">
					<div class="nav">
						<ul>
							<li><a id="tab" href="#">Classes</a> <span
								class="courses-button">▼</span>
								<ul class="courses-dd" id="tab">
									<c:forEach items="${teacher.subjects}" var="subject">
										<li class="course_li"><a class="course"
											href="../teacher/groupsservlet?subject=${subject.id}">
												${subject.name } </a></li>
									</c:forEach>

								</ul></li>
							<li><a href="../teacher">Schedule</a>
							</li>
							<li><a href="../teacher/help">Help</a>
							</li>
						</ul>
						<div class="usernav">
							<a href="#" id="account-drop" style="min-width: 110px;"> <img
								src="../images/icons/user2-16.png" alt=" " />${teacher.name } <span
								id="account-drop-down" style="float: right;">▼</span> </a>
							<ul id="drop-down">
								<li><a href="#" id="change-password">Change password</a></li>
								<li><a href="#" id="change-email">Change email</a></li>
								<li><a href="#" id="logout">Logout</a></li>
							</ul>
							<div class="clear"></div>
						</div>
						<div class="clear"></div>
					</div>
					<!-- nav end-->

					<div class="content">
						<div class="offset">
							<div class="left">
								<table class="crumbs">
									<tbody>
										<tr>
											<!-- change java code here -->
											<td class="first"><a href="#"> Help </a>
											</td>
											<td>→</td>
											<td class="last"><em>All questions</em></td>
										</tr>
									</tbody>
								</table>
								<div class="page-left">
									<h2 class="floatleft">All questions</h2>
									<button class="btn-green floatright" id="add-question">
										<span> <a href="">Ask a question</a> </span>
									</button>
									<div class="clear"></div>
									<table class="question-table">
										<thead>
											<tr>
												<th>Question</th>
												<th></th>
											</tr>
										</thead>
										<tbody>
											<c:forEach items="${questions}" var="oneQuestion">
												<tr data-col="${oneQuestion.question_id}">

													<td><a href="help?qid=${oneQuestion.question_id}">
															<c:out value="${oneQuestion.question}"></c:out> </a>
													</td>


													<c:set var="answer" value="${oneQuestion.answer}" />
													<c:choose>
														<c:when test="${fn:length(answer)>0}">
															<td style="color: green">answered</td>
														</c:when>
														<c:otherwise>
															<td style="color: red">unanswered</td>
														</c:otherwise>
													</c:choose>
												</tr>
											</c:forEach>
										</tbody>
									</table>
								</div>
							</div>
						</div>
						<div class="right">
							<div class="right-fade">
								<div class="right-time">
									<span class="time round-3" id="time"> </span>
								</div>
								<div class="right-classes">
									<h2>Your classes</h2>
									<ul class="courses_ul">
										<c:forEach items="${teacher.subjects }" var="subject">
											<li class="course_li"><a class="course"
												href="${subject.id }"> ${subject.name } </a></li>
										</c:forEach>
									</ul>
									<div class="clear"></div>

									<div class="clear"></div>
								</div>
								<div class="clear"></div>
								<div class="right-extras">
									<h2>Support</h2>
								</div>
							</div>
						</div>
						<div class="clear"></div>
					</div>

				</div>
				<div class="clear"></div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="shadow"></div>
		<div class="question-popup">
			<div class="question-item">
				<label for="question-title">Question title:</label> <input
					type="text" class="input" name="question-title" id="question-title" />
			</div>
			<div class="question-item">
				<label for="question-text">Question text:</label>
				<textarea class="input" name="question-text" rows="5"
					id="question-text"></textarea>
			</div>
			<div class="question-options">
				<button class="btn-green" id="question-submit">
					<span> Submit question </span>
				</button>
				or <a href="#" id="question-popup-cancel">Cancel</a>
			</div>
		</div>

	</div>
	<!-- container end-->

	<div id="footer"></div>
	<script src="../js/jquery-main.js"></script>
	<script>
		$(document)
				.ready(
						function() {

							var t = moment().format("MMMM Do YYYY, h:mma");
							$("#time").text(t);
							$(".feed-item").mouseover(
									function() {
										$(this).children(".feed-actions").css(
												"display", "block");
									});
							$(".feed-item").mouseleave(
									function() {
										$(this).children(".feed-actions").css(
												"display", "none");
									});

							$(".courses-button").click(
									function() {
										$("ul .courses-dd").css("visibility",
												"visible");
									});
							$("#tab").click(
									function() {
										$("ul .courses-dd").css("visibility",
												"visible");
									});
							$("ul .courses-dd").mouseleave(function() {
								$(this).css("visibility", "hidden");
							});
							$("#account-drop-down").click(function() {
								$("#drop-down").css("display", "block");
							});
							$("#account-drop").click(function() {
								$("#drop-down").css("display", "block");
							});
							$("#drop-down").mouseleave(function() {
								$(this).css("display", "none");
							});
							$("").click(function(ev) {
								ev.preventDefault();
							});
							$("#change-password").click(
									function(ev) {
										ev.preventDefault();
										var popup = $(".pass-popup");
										var height = $(window).height();
										var width = $(window).width();
										var popHeight = popup.height();
										var popWidth = popup.width();
										$(".shadow").css("display", "block");
										popup.css({
											"display" : "block",
											"left" : (width - popWidth) / 2,
											"top" : Math.max(
													(height - popHeight) / 3,
													20),
											"position" : "absolute"
										});
									});

							$("#pass-submit")
									.click(
											function(ev) {
												ev.preventDefault();
												var oldpass = $(
														"input[name=oldpass]")
														.val();
												var newpass = $(
														"input[name=newpass]")
														.val();
												var confpass = $(
														"input[name=confpass]")
														.val();
												$
														.ajax({
															url : "../teacher",
															type : "POST",
															data : "command=changepassword&current="
																	+ oldpass
																	+ "&new="
																	+ newpass
																	+ "&conf="
																	+ confpass,
															success : function(
																	message) {
																if (message == 0) {
																	$(
																			".pass-popup")
																			.css(
																					"display",
																					"none");
																	$(".shadow")
																			.css(
																					"display",
																					"none");
																} else if (message == 1) {
																	alert("incorrect old pasword");
																} else {
																	alert("mismatch password new password");
																}
															}
														});
												$(".pass-popup").css("display",
														"none");
												$(".shadow").css("display",
														"none");
											});

							$("#pass-cancel").click(function(ev) {
								ev.preventDefault();
								$(".pass-popup").css("display", "none");
								$(".shadow").css("display", "none");
							});

							$("#change-email").click(
									function(ev) {
										ev.preventDefault();
										var popup = $(".email-popup");
										var height = $(window).height();
										var width = $(window).width();
										var popHeight = popup.height();
										var popWidth = popup.width();
										$(".shadow").css("display", "block");
										popup.css({
											"display" : "block",
											"left" : (width - popWidth) / 2,
											"top" : Math.max(
													(height - popHeight) / 3,
													20),
											"position" : "absolute"
										});
									});

							$("#email-submit")
									.click(
											function(ev) {
												ev.preventDefault();
												var email = $(
														"input[name=email]")
														.val();
												$
														.ajax({
															url : "../teacher",
															type : "POST",
															data : "command=changeemail&email="
																	+ email,
															success : function(
																	message) {
																if (message == 0) {
																	$(
																			".email-popup")
																			.css(
																					"display",
																					"none");
																	$(".shadow")
																			.css(
																					"display",
																					"none");
																} else {
																	alert("can not change email");
																}
															}
														});
											});

							$("#email-cancel").click(function(ev) {
								ev.preventDefault();
								$(".email-popup").css("display", "none");
								$(".shadow").css("display", "none");
							});

							$("#logout")
									.click(
											function(ev) {
												ev.preventDefault();
												$
														.ajax({
															url : "../teacher",
															type : "POST",
															data : "command=logout",
															success : function(
																	message) {
																if (message == 0) {
																	window.location = "../teacher/login";
																}
															}
														});
											});

							$("#add-question").click(function(ev) {
								ev.preventDefault();
								console.log("hello pop");
								var width = $(window).width();
								var height = $(window).height();
								var pop = $(".question-popup");
								var popWidth = pop.width();
								var popHeight = pop.height();
								$(".shadow").css("display", "block");
								pop.css({
									"display" : "block",
									"left" : (width - popWidth) / 2,
									"top" : (height - popHeight) / 5,
									"z-index" : 999
								});
							});
							$("#question-popup-cancel").click(function(ev) {
								ev.preventDefault();
								$(".shadow").css("display", "none");
								$(".question-popup").css("display", "none");
							});

							$("#question-submit")
									.click(
											function(ev) {
												ev.preventDefault();
												var title = $("#question-title")
														.val();
												var text = $("#question-text")
														.val();
												$
														.ajax({
															url : "../teacher/help",
															type : "POST",
															data : "command=question&title="
																	+ +encodeURIComponent(title)
																	+ "&text="
																	+ encodeURIComponent(text), //data  title text
															success : function(
																	message) {
																if (message == 0) {

																} else if (message == 1) {
																	alert("NULL");
																}
															}
														});
												$(".shadow").css("display",
														"none");
												$(".question-popup").css(
														"display", "none");
											});
						});
	</script>
</body>
</html>